<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./../../yl/index.css" />  
    
    <title>人员信息</title>
    <style>
      * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
/* 容器布局 */
#app {
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.title {
  padding: 15px;
  background: #fff;
  box-shadow: 0 2px 12px rgba(0,0,0,0.1);
  z-index: 1;
}
.body {
  flex: 1;
  display: flex;
  gap: 20px;
  padding: 15px;
  overflow: hidden;
}
     /* 左侧导航 */
.left {
  padding: 1%;
  flex: 0 0 280px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  overflow: auto;
}
/* 右侧主内容 */
.right {
  padding: 1%;
  flex: 1;
  min-width: 300px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  display: flex;
  flex-direction: column;
}
/* 响应式处理 */
@media (max-width: 768px) {
  .body {
    flex-direction: column;
    padding: 10px;
  }
  
  .left {
    flex: 0 0 auto;
    width: 100%;
    margin-bottom: 15px;
  }
  
  .el-table {
    max-height: 50vh;
  }
}

/* 表格容器 */
.table-container {
  flex: 1;
  overflow: hidden;
  position: relative;
}

.el-table {
  height: 100% !important;
}

/* 分页样式 */
.el-pagination {
  padding: 12px;
  background: #fff;
  border-top: 1px solid #eee;
}

      .button {
        margin-left: 1%;
        min-width: 96px;
        height: 32px;
        background: #fff;
        border: 1px solid #d31805;
        border-radius: 16px;
        color: #d31805;
        cursor: pointer;
        outline: none;
      }
      .zdtype {
        background: #d31805;
        color: #fff;
        margin: 1%;
       width: 10%;
      }
      :deep(.el-select__wrapper) {
        align-items: normal;
      }
      .custom-dialog {
        padding: 20px;
        .dialog-header {
          text-align: center;
          padding: 15px 0;
          span {
            font-size: 18px;
            font-weight: bold;
            color: #333;
          }
        }
        .dialog-content {
          padding: 0px 50px;

          .full-width-checkbox {
            display: block;
            padding-left: 2%;
            font-weight: bold;
            color: #333;
          }

          .checkbox-columns {
            display: flex;

            .checkbox-column {
              width: 48%;

              .custom-checkbox {
                display: block;
                margin: 8px 0;
                padding: 5px 10px;
                border-radius: 4px;
                transition: all 0.3s;

                &:hover {
                  background-color: #f5f5f5;
                }
              }
            }
          }
        }

        .dialog-footer {
          text-align: center;
          padding: 15px 0;

          .cancel-btn {
            width: 100px;
            background: #f5f5f5;
            color: #666;
            border: none;

            &:hover {
              background: #e6e6e6;
            }
          }

          .confirm-btn {
            width: 100px;
            background: #d31805;
            border: none;

            &:hover {
              background: #b31505;
            }
          }
        }
      }
    </style>
  </head>
  <body>
    <div id="app">
      <!-- <div>
        <el-button circle>
          <Edit style="width:15px;height:15px;margin-right:5px;vertical-align:middle;fill:#d31805"/>
        </el-button>
       
      </div> -->
      <div class="title">
        <div style="margin-bottom: 1%;">
          总人数{{ totalMembers }}人（正式党员{{ fullMembers }}人，预备党员{{
          probationaryMembers }}人）
        </div>
        <div>
          名称：<el-input
            v-model="input"
            style="width: 200px"
            placeholder="请输入内容"
          ></el-input>
          政治面貌：
          <el-select v-model="value" placeholder="请选择" style="width: 200px">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <el-button type="danger" style="margin-left: 1%;" @click="check">查询</el-button>
          <el-button style="width: 60px" @click="reset">重置</el-button>
          <button class="button" @click="personalAdd">添加</button>
          <!-- <button class="button">批量导入/更新</button>
          <button class="button">批量删除</button>
          <button class="button">批量导出</button> -->
        </div>
      </div>
      <div class="body">
        <div class="left">
          <el-tree
            style="max-width: 600px"
            :data="treeData"
            @node-click="handleNodeClick"
            default-expand-all  :expand-on-click-node="false" 
          />
        </div>
        <div class="right">
          <el-button class="zdtype" @click="handleOpenDialog"
            >设置显示字段</el-button
          >
          <el-table
            height="450"
            v-loading="loading"
            ref="multipleTable"
            tooltip-effect="dark"
            :data="Tabletdata"
            @selection-change="handleSelectionChange"
          >
            <el-table-column
              width="180"
              v-for="column in columns"
              :key="column.COLUMN_NAME"
              :prop="column.COLUMN_NAME"
              :label="column.COLUMN_COMMENT"
            >
              <template #scope="scope">
                <div
                  :draggable="true"
                  @dragstart="dragStart(scope.$index)"
                  class="draggable-row"
                >
                  {{ scope.row[column.prop] }}
                </div>
              </template>
            </el-table-column>
            <el-table-column label="操作" fixed="right" min-width="132">
              <template #default="scope">
                <el-button
                  size="small"
                  @click="handleEdit(scope.$index, scope.row)"
                >
                  编辑
                </el-button>
                <el-button
                  size="small"
                  type="danger"
                  @click="handleDelete(scope.$index, scope.row)"
                >
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
          style="margin-top: 1%;"
            :current-page="1"
            :page-size="1"   
            :page-sizes="[100, 200, 300, 400]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="400"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
        </div>
        <el-dialog v-model="showDialog" width="550" class="custom-dialog">
          <template #header>
            <div class="dialog-header">
              <span>设置显示字段</span>
            </div>
          </template>
          <div class="dialog-content">
            <el-checkbox
              v-model="isAllChecked"
              @change="handleAllChecked"
              class="full-width-checkbox"
              >全选</el-checkbox
            >
            <div class="checkbox-columns">
              <el-checkbox-group
                v-model="checkedFields"
                style="width: 100%; display: flex; flex-wrap: wrap"
              >
                <el-checkbox
                  :disabled="field.COLUMN_KEY === 'PRI'"
                  v-for="field in fields"
                  :key="field"
                  :value="field"
                  style="width: 50%; height: 30px; margin-right: 0px"
                >
                  {{ field.COLUMN_COMMENT }}
                </el-checkbox>
              </el-checkbox-group>
            </div>
          </div>
          <template #footer>
            <div class="dialog-footer">
              <el-button @click="showDialog = false" class="cancel-btn"
                >取消</el-button
              >
              <el-button type="primary" @click="saveFields" class="confirm-btn"
                >保存</el-button
              >
            </div>
          </template>
        </el-dialog>
        <!-- <el-dialog v-model="showaddDialog" width="30%" class="custom-dialog">
          <template #header>
            <div class="dialog-header">
              <span>添加字段</span>
            </div>
          </template>
          <el-form v-model="form">
            <el-form-item label="字段名称" :label-width="formLabelWidth">
              <el-input
                style="width: 240px"
                v-model="form.COLUMN_COMMENT"
                autocomplete="off"
              />
            </el-form-item>
            <el-form-item label="字段ID" :label-width="formLabelWidth">
              <el-input
                v-model="form.COLUMN_NAME"
                style="width: 240px"
                disabled
                placeholder="输入名称等待识别"
              />
            </el-form-item>
          </el-form>
          <template #footer>
            <div class="dialog-footer">
              <el-button @click="showaddDialog = false">取消</el-button>
              <el-button type="danger" @click="addDialogtrue"> 确认 </el-button>
            </div>
          </template>
        </el-dialog> -->
      </div>
    </div>
    <script src="../../../yl/vue.js"></script>
    <script src="../../../config/config.js"></script>
    <script src="../../../yl/index.js"></script> 
    <script src="../../yl/index.iife.min.js"></script> 
    <script src="../../../yl/jquery.min.js"></script>
<script src="../../../utils/jquery.cookie.js"></script>
    <script src="../../../api/request.js"></script>
    <script src="./js/personal.js"></script>
  </body>
</html>
